<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

    <style>
        body {
            width: 100%;
            height: 800px;
            margin: 0; /*去掉外边距*/
            background-size: cover; /*设置封面*/
            text-align: center; /*页面内部的文本居中*/
            background-position: 0 123px;
            background-repeat: no-repeat;
            /* background-size: 2000px auto;*/
        }

        h1 {
            font-size: 72px;
            color: #0096dc;
            margin-bottom: 0;
        }

        img {
            width: 100px;
        }

        h2 {
            font-size: 32px;
            color: black;
            font-family: Stfangsong;
            margin-bottom: 0;

        }

        #head {
            height: 120px;
            border: 1px solid white;
            width: 100%;
            padding: 0;
            /*        background-color: antiquewhite;*/

        }

        #head > img {
            margin-left: 150px;
            margin-top: 30px;
            float: left;
        }

        ul, li {
            list-style-type: none;
        }

        ul {
            float: left;
        }

        .c1 {
            display: block;
            padding-left: 30px;
            font-size: 14px;
            color: #3f3f3f;
            height: 36px;
            line-height: 36px;
            background-position: 0 -39px;
            float: left;

        }

        h3 {
            float: right;
            margin: 40px 175px;
            font-size: 50px;
            color: black;
            font-family: Stfangsong;
        }

        a {
            text-decoration: none;
            color: #3f3f3f;
        }
    </style>

</head>
<body>
<div id="app">
    <el-container>
        <el-header height="132px">
            <div id="head" style="margin: 0 auto">
                <img style="width: 250px; height: 130px; margin: 0" src="pictures/logo.jpg" alt="">
                <h3>欢迎来到ECHO BOOKS</h3>
            </div>
        </el-header>

        <el-maim style="width: 100%;height: 800px; background-image: url('pictures/login.jpg')">

            <el-card style="width: 500px;height: 350px;margin-top: 180px;margin-right:130px;float: right;
                background-color: rgba(163,148,128,0.75); border: 0px">
                <h2 style="font-size:35px;margin-top: 8px">BookMall</h2>
                <!--label-width设置用户名这一列所占的宽度,如果不设置会显示在上面-->
                <el-form label-width="8px" style="width: 400px;margin: 25px auto">
                    <el-form-item style="position: relative;">
                        <el-input type="text" v-model="user.phone" placeholder="请输入电话号码"></el-input>
                        <img src="pictures/password.jpg" alt=""
                             style="position: absolute;right:30px;top:8px; width:30px;height:30px">
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
                        <img src="pictures/phone.jpg" alt=""
                             style="position: absolute;right:30px;top:8px; width:30px;height:30px">
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="user.rem" style="float: left;margin-left: 30px;color: rebeccapurple">记住我
                            <a href="" style="margin-left: 200px; text-decoration: none;">忘记密码？</a>
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                style="position: relative;right: 5px; background-color: dodgerblue; width: 100px; border: 0px"
                                type="primary" @click="login()">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-maim>
        <el-footer>

            <div style="padding:10px 0;text-align: center; margin-top:0px; color: #808080; width: 100%">
                <template>
                    <div style="margin-top: 20px">
                        <a href="/">首页</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">购物指南</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">支付方式</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">订单服务</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">配送方式</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">帮助</a><br>
                        <div style="margin-top: 20px">
                            <span>京ICP证041189号</span>
                            <span>出版物经营许可证</span>
                            <el-divider direction="vertical"></el-divider>
                            新出发京批字第直0673号
                            <el-divider direction="vertical"></el-divider>
                            <span> 食品经营许可证：JY11101050363440</span> <br>
                            <div style="margin-top: 10px">
                                <span>京ICP备17043473号-1</span>
                                <el-divider direction="vertical"></el-divider>
                                <span>京公网安备11010502037644号</span>
                                <el-divider direction="vertical"></el-divider>
                                <span>经营许可证编号：合字B2-20160011</span>
                                <el-divider direction="vertical"></el-divider>
                                <span>互联网药品信息服务资格证</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </el-footer>

    </el-container>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    password: "",
                    phone: "",
                    rem: false,
                }

            }
        },
        methods: {
            login() {
                axios.post("/user/login", v.user).then(function (response) {
                    //1 登录成功 2 密码错误 3 用户不存在
                    if (response.data == 1) {
                        alert("登录成功！")
                        location.href = "/index.html";
                    } else if (response.data == 2) {
                        alert("密码错误")
                    } else {
                        alert("电话号码不存在")
                    }
                })
            }

        },
        created:function () {
            let arr = document.cookie.split(";");
            for (let cookie of arr) {
                let cookieArr = cookie.split("=");
                let name = cookieArr[0].trim();
                let value = cookieArr[1];
                if (name=="phone"){
                    this.user.phone = value;
                }else if(name=="password"){
                    this.user.password = value;
                }
            }
        }
    })
</script>
</html>